<template>
<div>
  <!-- 三级分类 -->
  <CategorySelector
    @getCategoryId="getCategoryId"
    :show="scene != 0"
  ></CategorySelector>
  
  <el-card>
    <!-- 列表 -->
    <div v-show="scene==0">
    <!-- 添加按钮 -->
    <div class="btn" style="margin-bottom: 20px;">
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="addSpu"
          >添加SPU</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :data="records"
      border
      style="width: 100%; margin-bottom: 20px;">
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="90">
    </el-table-column>
    <el-table-column
      prop="spuName"
      label="SPU名称">
    </el-table-column>
    <el-table-column
      prop="description"
      label="SPU描述">
    </el-table-column>
    <el-table-column
      prop="prop"
      label="SPU操作">
      <template v-slot="{row,$index}">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addSku"
          size="mini"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
        ></el-button>
        <el-button
          type="info"
          icon="el-icon-info"
          size="mini"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
        ></el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="getSpuList"
      :current-page="page"
      :page-sizes="[3, 6, 9]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total">
    </el-pagination>
  </div>
  <spu
    v-show="scene==1"
    @changeScene="changeScene"
    ref="spu"
  ></spu>
  <sku
    v-show="scene==2"
    @changeScenes="changeScenes"
    ref="sku"
  ></sku>
  </el-card>
</div>
</template>

<script>
import CategorySelector from '@/components/CategorySelector'
import {reqSpuList} from '@/api/spu'
import spu from './components/spu.vue'
import sku from './components/sku.vue'
export default {
  name: "spu管理",
  components:{
    CategorySelector,
    spu,
    sku
  },
  data() {
    return {
      //三级分类id
      category1Id:'',
      category2Id:'',
      category3Id:'',
      //分页器
      page:1,
      limit:3,
      total:0,
      //spu列表数据
      records:[],
      //0为列表页面，1为添加/修改spu页面，2为添加sku页面
      scene:0,
    }
  },
  methods: {
    //获取分类id
    getCategoryId({categoryId,level}){
      if(level == 1){
        this.category1Id = categoryId
        this.category2Id = ""
        this.category3Id = ""
      }else if(level == 2){
        this.category2Id = categoryId
        this.category3Id = ""
      }else{
        this.category3Id = categoryId
        this.getSpuList()
      }
    },
    //获取列表数据
    async getSpuList(pages = 1){
      this.page = pages
      const{page,limit,category3Id} = this
      const res = await reqSpuList(page,limit,category3Id)
      // console.log(res);
      this.total = res.data.total
      this.records = res.data.records
    },
    //分页器更改展示条数
    handleSizeChange(limit){
      this.limit = limit
      this.getSpuList()
    },
    //添加spu
    addSpu(){
      this.scene = 1
    },
    //changeScene
    changeScene({scene,flag}){
      this.scene = scene
    },
    changeScenes({scene}){
      this.scene = scene
    },
    //添加sku
    addSku(row){
      this.scene = 2
    }
  },
};
</script>


<style scoped></style>